@import '../../ui/base'

.root
	position relative
	&.show
		> div
			pointer-events all
	&.lowerLeft
		.outline
			transform-origin 0 0
	&.lowerRight
		.outline
			transform-origin 100% 0
	&.topLeft
		.outline
			transform-origin 0 100%
	&.topRight
		.outline
			transform-origin 100% 100%
	&.bottom
		.outline
			transform-origin 0 0
		> div
			.outline
				transform scale(1, 0)
				&.scale
					transform scale(1, 1)
	i
		position relative
	> div
		position absolute
		pointer-events none
		.outline
			position absolute
			opacity 0
			transition .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1)
			transform scale(0)
			box-shadow 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)
			will-change transform
			&.scale
				transform scale(1)
				opacity 1
		.body
			transition opacity .2s cubic-bezier(.4,0,.2,1),clip .3s cubic-bezier(.4,0,.2,1)
			opacity 0
			background-color #fff
			position absolute
			z-index 10
			&.active
				opacity 1
			li
				display flex
				justify-content center
				align-items center
				padding 6px 8px
				cursor pointer
				&:hover
					background-color $font-light-color
				> span
					display flex
					align-items center
					i
						margin-right 10px
					span
						line-height 1
